<template>
  <div style="height: 100%; overflow: scroll; padding: 20px">
    <div
      style="
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <a-button @click="back">返回</a-button>
      <div>
        <a-button @click="submit" type="primary">提交日程</a-button>
        <a-button @click="expertDerive" type="primary" style="margin: 0 20px"
          >导出</a-button
        >
      </div>
    </div>
    <table border="1">
      <thead>
        <tr>
          <th colspan="12" style="width: 100px">{{ name }}</th>
        </tr>
        <tr>
          <th style="width: 80px">姓名</th>
          <th style="width: 150px">周一</th>
          <th style="width: 150px">周二</th>
          <th style="width: 150px">周三</th>
          <th style="width: 150px">周四</th>
          <th style="width: 150px">周五</th>
          <th style="width: 150px">周六</th>
          <th style="width: 150px">周日</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <td v-for="(item, itemIndex) in row" :key="itemIndex">
            <template v-if="itemIndex == 0">
              <input
                style="border: 0; text-align: center"
                :value="item.value"
                :disabled="true"
              />
            </template>
            <template v-else>
              <a-textarea
                v-resize="monResize"
                @change="(e) => inputChange(e, rowIndex, itemIndex, item)"
                style="word-break: break-all; resize: both"
                :value="item.value"
                :rowIndex="rowIndex"
                :itemIndex="itemIndex"
              />
              <span
                style="
                  text-align: left;
                  width: 100%;
                  display: inline-block;
                  white-space: pre-line;
                  font-size: 11px;
                  color: #a09f9f;
                  padding: 3px;
                "
              >
                {{ item.msg }}
              </span>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {
  getScheduleDetail,
  submitSchedule,
  expertDerive,
} from '@/api/schedule';
import moment from 'moment';
import _ from 'lodash';
import Cookies from 'js-cookie';
export default {
  data() {
    return {
      tableData: [],
      id: '',
      name: '',
      backPath: '',
      positionArr: [],
      userName: JSON.parse(Cookies.get('loginInfo'))
        ? JSON.parse(Cookies.get('loginInfo')).userName
        : '超级管理员',
    };
  },
  directives: {
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = '';
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value({
              width: style.width,
              height: style.height,
              rowIndex: el.getAttribute('rowIndex'),
              itemIndex: el.getAttribute('itemIndex'),
            }); // 关键(这传入的是函数,所以执行此函数)
          }
          width = style.width;
          height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      },
    },
  },
  created() {
    const { id, name, backPath } = this.$route.query;
    this.id = id;
    this.name = name;
    this.backPath = backPath;
    console.log(id);
    getScheduleDetail({ id }).then((res) => {
      console.log(res);
      this.tableData = res.data;
    });
  },
  mounted() {},
  computed: {},
  methods: {
    monResize(data) {
      let { width, height, rowIndex, itemIndex } = data;
      console.log('width' + width);
      console.log('height' + height);
      //   console.log(itemIndex);
    },
    back() {
      this.$router.push(this.backPath);
    },
    inputChange(e, rowIndex, itemIndex, item) {
      console.log(e);
      const { value } = e.target;
      this.tableData[rowIndex][itemIndex].value = value;
      const targetObject = { rowIndex, itemIndex };

      const isContained = this.positionArr.some(({ rowIndex, itemIndex }) => {
        return (
          rowIndex === targetObject.rowIndex &&
          itemIndex === targetObject.itemIndex
        );
      });
      if (!isContained) {
        this.positionArr.push(targetObject);
      }
    },
    submit() {
      var currentDate = new Date();
      console.log(currentDate);
      let data = _.cloneDeep(this.tableData);
      data = data.map((row, index) =>
        row
          .map((item, index1) => {
            this.positionArr.forEach((item1) => {
              if (item1.rowIndex == index && item1.itemIndex == index1) {
                item.msg =
                  item.msg +
                  moment(new Date()).format('YYYY-MM-DD HH:mm:ss') +
                  ' ' +
                  this.userName +
                  '\n';
              }
            });
            return item;
          })
          .concat({
            name: '8',
            value: this.id,
          })
      );
      submitSchedule(data).then((res) => {
        if (res.code == 200) {
          this.$message.success('提交成功');
          this.back();
        }
      });
    },
    expertDerive() {
      expertDerive({
        approvalId: this.id,
      }).then((response) => {
        const blob = new Blob([response]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        const timestamp = new Date()
          .toISOString()
          .replace(/[-T:]/g, '')
          .slice(0, 14);
        const fileName = `${timestamp}.xlsx`;
        link.href = url;
        link.download = fileName;
        link.click();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

th:first-child {
  width: 50px;
  height: 50px;
}

td:first-child {
  text-align: center;
}
</style>
